<template>
    <div id="rich"></div>
  </template>
  
  <script setup>
  import { onMounted, onUnmounted } from "vue";
  import * as echarts from "echarts";
  let myRich = null;
  let myEchart = null;
  onMounted(() => {
    myRich = document.getElementById("rich");
    myEchart = echarts.init(myRich);
    let option = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sta", "Sun"],
      },
      yAxis: {},
      series: [
        {
            stack: 'all',
          type: "bar",
          data: [1, 2, 3, 4, 5],
          label: {
            show: true,
            color: 'pink'
          },
          barWidth: 50,
          showBackground: true,
        //   labelLine: {
        //     show: true
        //   }
        },
        {stack: 'all',
          type: "bar",
          data: [3, 4, 2, 3, 5],
          label: {
            show: true,
            color: 'red'
          },
          lineStyle: {
            width: 5
          },
          symbolSize: 10,
          symbol: 'image://http://localhost:5173/image/first.svg',
        //   areaStyle: {
        //     color: 'pink'
        //   },
        //   step: true,  // 阶梯图
        //   smooth: true, // 线段连接处是否圆滑
        },
      ],
    };
    myEchart.setOption(option);
  });
  onUnmounted(() => {
    myEchart.dispose(myRich);
  });
  </script>
  
  <style lang="less" scoped>
  #rich {
    width: 800px;
    height: 400px;
  }
  </style>
  